<!-- @Author: Yu_Bo -->
<template>
	<view class="share">
		<image class="image" :src="fileImgPath" mode="widthFix"></image>
		<!-- <view class="image">
			<image class="img_bg" src="@/static/images/img/inv_background.png" mode=""></image>
			<image class="img_code" :src="qrcode" mode=""></image>
		</view> -->
		<view class="mycanvas">
			<canvas id="mycanvas" canvas-id="mycanvas"></canvas>
		</view>
		<!-- 底部按钮 -->
		<c-footer>
			<view class="footer_btn">
				<view class="btn_txt color_right page_button" @click="saveImage(2)">
					保存图片
				</view>
			</view>
		</c-footer>
	</view>
</template>

<script>
	import { imageToInfoPath, imageRect } from '@/utils/shareCanvas'
	export default {
		components: {},
		data() {
			return{
				qrcode: "",
				fileImgPath: '',
			}
		},
		computed: {},
		onLoad() {
			this.getInfo()
		},
		onShow() {},
		methods: {
			getInfo() {
				var that = this
				that.$httpApi.appletCode().then((res) => {
					if (res.code == 1) {
						// that.qrcode = "http://haiyangshuwu.lizuzhe.com/uploads/20230610/90412326052a718eb4047d16b9e41a62.jpg"
						that.qrcode = res.data.invitation_image
						that.drawShare()
					}
				})
			},
			async drawShare() {
				var that = this
				const ctx = uni.createCanvasContext('mycanvas', this)
				var pathImg = '/static/images/img/inv_background.png'
				imageRect(ctx, pathImg, 0, 0, 690, 1182, 20, {
					width: 690,
					height: 1182
				})
				ctx.restore()
				// //绘制二维码
				const qrcode = await imageToInfoPath(ctx, that.qrcode)
				ctx.save();
				ctx.beginPath()
				ctx.drawImage(qrcode.path, 246, 696, 200, 200)
				ctx.restore()
				// 
				ctx.draw(true, (ret) => {
					console.log(ret)
					setTimeout(() => {
						console.log('绘制完成')
						that.saveImage(1)
					}, 100)
				})
			},
			saveImage(type) {
				var that = this
				uni.showLoading({
					title: '正在生成分享图片'
				})
				let dest = {
					destWidth: 690,
					destHeight: 1182
				}
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					...dest,
					success: (canvas_res) => {
						uni.hideLoading()
						console.log(canvas_res)
						that.fileImgPath = canvas_res.tempFilePath
						if(type == 1) return
						uni.getSetting({
							success(set_res) {
								console.log(set_res)
								if (!set_res.authSetting['scope.writePhotosAlbum']) {
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success(auth_res){
											console.log(auth_res)
										},
										fail(err){
											uni.showModal({
												title: '提示',
												content: '您未进行手机相册授权，图片将不能保存，是否重新授权',
												success(model_res) {
													if (model_res.confirm) {
														uni.openSetting({
															success(open_res) {
																console.log(open_res.authSetting)
															}
														})
													} else if (model_res.cancel) {
														console.log(123)
													}
												}
											})
										}
									})
								} else if (set_res.authSetting["scope.writePhotosAlbum"] === true){
									uni.saveImageToPhotosAlbum({
										filePath: canvas_res.tempFilePath,
										success(save_res) {
											that.$tips.showToast("图片已保存到相册")
										},
									})
								}
							}
						})
					}
				})
			},
		},
	}
</script>

<style lang='scss' scoped>
	.mycanvas {
		position: fixed;
		top: -1000px;
		left: -1000px;
		z-index: 1;
		
		#mycanvas {
			width: 690px;
			height: 1182px;
		}
	}
	.share {
		box-sizing: border-box;
		width: 100%;
		padding: 30rpx;
		
		.image {
			display: block;
			width: 100%;
			
			.img_bg {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				display: block;
				width: 100%;
				height: 100%;
			}
			
			.img_code {
				position: absolute;
				top: 696rpx;
				left: 246rpx;
				z-index: 2;
				display: block;
				width: 200rpx;
				height: 200rpx;
			}
		}
		
		.footer_btn {
			width: 100%;
			padding: 30rpx 30rpx;
			background: #fff;
			
			.btn_txt {
				width: 100%;
				height: 90rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>